<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全选全消和反选</title>
    <style type="text/css">
        table {
            width: 500px;
            margin: 0 auto;
            border-collapse: collapse;
        }

        td, th {
            border: 1px solid #2258e0;
            text-align: center;
        }

    </style>
</head>
<body>
<table>
    <tr>
        <th style="width:100px;">
            <input type="checkbox" id="checkall" title="全选/全消" onclick="check()"/>
            <input type="button" value="反选" onclick="inverse()">
        </th>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>1</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>2</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>3</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>4</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>5</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="item"/>
        </td>
        <td>6</td>
        <td></td>
        <td></td>
    </tr>
</table>

<!--
需求：
点击checkall的时候，如果checkall是选中状态，设置所有的item都设置为选中状态；
点击checkall的时候，如果checkall是未选中状态，设置所有的item都设置为未选中状态；
思路：
获取checkall的选中状态，
if选中状态：
    获取所有的item，分别设置为选中状态
else：
    获取所有的item，分别设置为未选中状态
思路：
    点击checkall的时候，设置所有item的选中状态和checkall的选中状态一致

    获取checkall的选中状态
    获取所有的item，循环便利：
        设置每个item的状态为checkall状态

-->

<script>
    function check() {
        // 获取checkall的chceked属性值
        var v = document.getElementById("checkall").checked;
        // 获取所有的item
        var items = document.getElementsByClassName("item");
        for (var i = 0; i < items.length; i++) {
            items[i].checked = v;
        }
    }

    /**
     * 反选思路：
     * 1、获取所有的item，循环便利每一个，获取选中状态取反
     * 2、获取所有的item，循环便利每一个，模拟一次点击操作
     */
    function inverse() {
        var items = document.getElementsByClassName("item");
        for (var i = 0; i < items.length; i++) {
            items[i].click();
        }
    }

</script>
</body>
</html>
